<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>开始使用layui</title>
  <link rel="stylesheet" href="assets/libs/layui/css/layui.css">
  <link rel="stylesheet" href="assets/libs/swiper/css/swiper.css">

  <!-- 自定义css -->
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="assets/css/app.css">


  <!-- browser version check -->
  <script>
  	if (!!window.ActiveXObject || "ActiveXObject" in window){
       alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
       window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);
    }
  </script>
  <link href="assets/libs/badbrowser/css/badbrowser.css" rel="stylesheet"/>
  <script src="assets/libs/badbrowser/js/badbrowser.js"></script>

  
</head>
<body class="bg-body">
 
	<!-- header -->
	<section class="header">
		<!-- 主导航 -->
		<div class="layui-bg-black main-nav">
			<div class="layui-container">
				<div class="layui-nav layui-bg-black flex-def flex-zBetween">
					<!-- logo -->
					<div class="layui-nav-item">
						<a class="flex-def flex-cCenter" href="/">
				      <img src="assets/img/logo.png" width="82" height="31" alt="logo">
				    </a>
					</div>
					<!-- nav list -->
			    <div>
					  <div class="layui-nav-item layui-hide layui-show-xs-block">
						  <a id="main_nav_btn" class="text-center" href="javascript:;">
						  	<i class="layui-icon layui-icon-app"></i> 
						  </a>
					  </div>
						<ul id="main_nav_list" class="layui-hide-xs">
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">最新活动</a></li>
						  <li class="layui-nav-item layui-show-xs-block layui-this"><a href="javascript:;">产品</a></li>
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">大数据</a></li>
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">社区</a></li>
						  <li class="layui-nav-item layui-show-xs-block">
						    <a href="javascript:;">
						    	<img src="assets/img/user.jpg" class="layui-nav-img">我
						    </a>
						    <dl class="layui-nav-child">
						      <dd><a href="javascript:;">修改信息</a></dd>
						      <dd><a href="javascript:;">安全管理</a></dd>
						      <dd><a href="javascript:;">退了</a></dd>
						    </dl>
						  </li>
						  <!-- 登录 注册
						  <li class="layui-nav-item"><a class="signup" href="#">登录</a></li>
						  <li class="layui-nav-item"><a class="signup" href="#">注册</a></li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 次导航 -->
		<div class="ci-nav bg-white shadow">
			<div class="layui-container swiper-box">
				<div id="nav_swiper" class="swiper-container">
					<div class="swiper-wrapper">
				    <a class="swiper-slide active" href="#">Dashboard</a>
				    <a class="swiper-slide" href="#">Friends</a>
				    <a class="swiper-slide" href="#">Explore</a>
				    <a class="swiper-slide" href="#">Suggestions</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				  </div>
				</div>
				<!-- 如果需要导航按钮 -->
				<span id="nav_prev" class="swiper-button-prev"></span>
				<span id="nav_next" class="swiper-button-next"></span>
			</div>
		</div>
	</section>

	<!-- crumb -->
	<section class="crumb top-25 layui-hide-xs">
		<div class="layui-container">
			<span class="layui-breadcrumb">
				<a href="/"><i class="layui-icon layui-icon-home"></i></a>
				<a href="">国际新闻</a>
				<a href="">亚太地区</a>
				<a><cite>正文</cite></a>
			</span>
		</div>
	</section>

	<!-- body -->
	<section class="body top-25">
		<div class="layui-container">
			<div class="layui-row layui-col-space20">
				<!-- left -->
				<div class="layui-col-md3">
					<!-- subscribe -->
					<div class="subscribe-tab">
						<div class="subscribe-header">
							<h2 class="subscribe-tab-title">1月29日</h2> 
							<div class="subscribe-tab-time">
								<span>JAN.29</span> 
								<span>农历一月四日</span> 
								<span>星期三</span>
							</div>
						</div>
						<div class="subscribe-footer">
							<p>共订阅2个媒体<i class="layui-icon layui-icon-right"></i></p>
					  </div>
					</div>
				</div>
				<!-- center -->
				<div class="layui-col-md6">
					<div class="block">
						<!-- slide -->
						<div class="slide">
							<div class="block-header flex-def flex-zBetween">
								<h2>
									<i class="layui-icon layui-icon-star best-icon"></i> 
									精品推荐
								</h2>
							</div>
							<div id="slide_container" class="swiper-container">
			    			<div class="slide-wrap swiper-wrapper">
			    				<div class="slide-item swiper-slide">
			    					<img src="assets/img/0.jpg"> 
			    					<div>
			    						<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2> 
				    					<p><a href="#">记者/梁婷  编辑/杨宝璐 宋建华   王康拍摄的金银潭医院病房照片  据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
				    					</a></p> 
			    					</div>
			    				</div>
			    				<div class="slide-item swiper-slide">
			    					<img src="assets/img/1.jpg"> 
			    					<div>
			    						<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2> 
				    					<p><a href="#">记者/梁婷  编辑/杨宝璐 宋建华   王康拍摄的金银潭医院病房照片  据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
				    					</a></p> 
			    					</div>
			    				</div>
			    				<div class="slide-item swiper-slide">
			    					<img src="assets/img/2.jpg"> 
			    					<div>
			    						<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2> 
				    					<p><a href="#">记者/梁婷  编辑/杨宝璐 宋建华   王康拍摄的金银潭医院病房照片  据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
				    					</a></p> 
			    					</div>
			    				</div>
			    			</div>
			    			<!-- 如果需要导航按钮 -->
								<span id="slide_prev" class="swiper-button-prev"></span>
								<span id="slide_next" class="swiper-button-next"></span>
		    				<div id="slide_pagination" class="swiper-pagination"></div> 
			    		</div>
							<div class="block-footer top-25 flex-def">
								<a href="#" class="more">
									更多专题
									<i class="layui-icon layui-icon-right"></i>
								</a>
							</div>
						</div>
		    		
		
						<!-- hot topic -->
		    		<div class="topic top-25">
		    			<div class="block-header flex-def flex-zBetween">
								<h2>
									<i class="layui-icon layui-icon-heart best-icon"></i> 
									热门专题
								</h2>
								<a href="#" class="more">
									更多专题
									<i class="layui-icon layui-icon-right"></i>
								</a>
							</div>
							<ul class="topic-tags">
								<li><a href="#">热点</a></li>
								<li><a href="#">见闻</a></li>
								<li><a href="#">新知</a></li>
								<li><a href="#">读心</a></li>
								<li><a href="#">职场</a></li>
								<li><a href="#">娱乐</a></li>
								<li><a href="#">潮流</a></li>
								<li><a href="#">商界</a></li>
								<li><a href="#">人文</a></li>
								<li><a href="#">乐活</a></li>
								<li><a href="#">腔调</a></li>
								<li title="换一批"><a href="#"><i class="layui-icon layui-icon-refresh-1"></i></a></li>
							</ul>
		    		</div>
				
						<!-- posts -->
		    		<div class="posts top-25">
		    			<div class="block-header flex-def flex-zBetween">
								<h2><i class="layui-icon layui-icon-read best-icon"></i> 最新文章</h2>
							</div>

							<!-- post list -->
							<ul>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/0.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/1.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<!-- <div class="post-right">
											<img src="assets/img/2.jpg" class="heightsuit">
										</div> -->
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<!-- <div class="post-right">
											<img src="assets/img/3.jpg" class="heightsuit">
										</div> -->
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/4.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>
								
									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3> 
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/5.jpg" class="heightsuit">
										</div>
									</div>
								</li>
							</ul>
		    		</div>

		    		<!-- pager -->
		    		<div id="pagination" class="flex-def flex-zCenter top-25">
		    			<div id="pager"></div>
		    		</div>

					</div>
				</div>
				<!-- right -->
				<div class="layui-col-md3">
					<!-- 订阅 -->
		      <div class="block medium-card">
		    		<div class="medium-top">
	    				<div>
	    					<img src="assets/img/0.webp"> 
	    					<h3>历史品读</h3>
	    				</div> 
    					<!-- <a  href="#" class="focus">订阅</a>  -->
    					<a class="unfocus" href="#">已订阅</a>
		    		</div>
		    		<div class="medium-bottom">
		    			全球视野，价值视角。
		    		</div>
		    	</div>

		    	<!-- 订阅 -->
		      <div class="block medium-card top-25">
		    		<div class="medium-top">
	    				<div>
	    					<img src="assets/img/0.webp"> 
	    					<h3>历史品读</h3>
	    				</div> 
    					<a  href="#" class="focus">订阅</a> 
    					<!-- <a class="unfocus" href="#">已订阅</a> -->
		    		</div>
		    		<div class="medium-bottom">
		    			全球视野，价值视角。
		    		</div>
		    	</div>

		    	<!-- 作者 -->
		      <div class="block author top-25">
		      	<div class="block-header">
		      		<h2>推荐作者</h2>
		      		<a href="#" class="more">
						    更多
						    <i class="layui-icon layui-icon-right"></i>
						  </a>
		      	</div>
		    		<div class="author-wrap">
		    			<ul>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    			</ul>
		    		</div>
		    	</div>

					<!-- 标签 -->
		    	<div class="block tags top-25">
		      	<div class="block-header">
		      		<h2>热门标签</h2>
		      		<a href="#" class="more">
						    更多
						    <i class="layui-icon layui-icon-right"></i>
						  </a>
		      	</div>
		    		<div class="tags-wrap">
		    			<a href="#"><span>热点</span></a>
		    			<a href="#"><span>商界</span></a>
		    			<a href="#"><span>见闻</span></a>
		    			<a href="#"><span>职场</span></a>
		    			<a href="#"><span>娱乐</span></a>
		    			<a href="#"><span>新知</span></a>
		    			<a href="#"><span>读心</span></a>
		    			<a href="#"><span>乐活</span></a>
		    			<a href="#"><span>潮流</span></a>
		    			<a href="#"><span>人文</span></a>
		    			<a href="#"><span>腔调</span></a>
		    		</div>
		    	</div>

				</div>
			</div>
		</div>
	</section>

	<!-- footer -->
	<section class="footer">
    <p>
      Copyright © 2019<a href="javascript:;" target="_blank">daimajie.com</a>
      <a href="javascript:;" target="_blank">DAIMAJIE社区</a>
      <a href="javascript:;" target="_blank" rel="nofollow">黑ICP备123456789号</a>
    </p>
  </section>

 
<script src="assets/libs/layui/layui.js"></script>
<script src="assets/js/config.js"></script>


<script>
layui.use(['layer', 'element', 'swiper', 'jquery', 'laypage'], function(){
  var layer = layui.layer
  ,$ = layui.jquery
  ,swiper = layui.swiper
  ,element = layui.element
  ,laypage = layui.laypage;

  //browser version check
	new badbrowser({
	    supported: {
	    	chrome: '56',
	      msedge: '16',
	      firefox: '37',
	      opera: '42',
	      safari: '8'
	    },
	    path: './assets/libs/badbrowser/alerts/zh.html',
	    ignoreChoice: true
	});

  //导航JS
  (function nav(){
		/*主导航*/
	  $('#main_nav_btn').on('click', function(){
	  	$('#main_nav_list').toggleClass('layui-hide-xs');
	  });

	  /*次导航*/
	  var mainNavSwiper = new Swiper('#nav_swiper',{
	  		slidesPerView : 'auto',
	  		navigation: {
		      nextEl: '#nav_prev',
		      prevEl: '#nav_next',
		    },
	  });
  })();
  

	//轮播图
  var slideSwiper = new Swiper('#slide_container',{
		loop:true,
		spaceBetween : 20,
		pagination : {
			el:'#slide_pagination',
		},
		navigation: {
      nextEl: '#slide_prev',
      prevEl: '#slide_next',
    },
  });

  //分页
  laypage.render({
    elem: 'pagination'
    ,count: 50
    ,prev : '<i class="layui-icon layui-icon-left"></i>   '
    ,next : '<i class="layui-icon layui-icon-right"></i>   '
  });

  layer.msg('Hello World');
});
</script> 
</body>
</html>